<!-- 表单拼接页 -->
<template>
  <div class="add-form-page">
    <div class="header-tool">
      <div class="title">填写表单</div>
      <div class="goBack" @click="goBack">{{ `<<返回上一页` }}</div>
    </div>
    <PageForm
      ref="myRuleForm"
      :formRules="state.formRules"
      :formHeader="state.formHeader"
      @updateMyForm="updateMyForm"
      @submitForm="submitForm"
    ></PageForm>
  </div>
</template>
<script setup>
import { onBeforeMount, reactive, ref } from 'vue'
import { getList, getItem, updateItem, deleteItem } from '@/api/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const myRuleForm = ref(null) // 当前form的DOM元素
const emits = defineEmits('submitForm', 'goBack', 'updateMyForm')
const props = defineProps({})
const state = reactive({
  formRules: {
    name: [{ required: true, max: 10, message: '请填写名字', trigger: 'blur' }],
    sex: [{ required: false }],
    power_status: [{ required: true, message: '请至少选择一项', trigger: 'blur' }],
    phone: [
      { required: true, min: 11, max: 11, message: '请输入11位数字的电话号码', trigger: 'blur' }
    ],
    email: [{ required: true, message: '请输入正确的邮箱格式', trigger: 'blur' }],
    reason: [{ required: true, message: '请至少输入10个字', trigger: 'blur' }],
    area: [{ required: false }],
    date: [{ required: true, message: '请至少输入10个字', trigger: 'blur' }]
  },
  formHeader: [
    {
      label: '姓名', // 输入框名字
      slotType: 'input', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'name', // 输入框字段名
      placeholder: '请填写名字' // 输入框placeholder提示语加上，可用于告知用户规则
    },
    {
      label: '性别', // 输入框名字
      slotType: 'select', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'sex', // 输入框字段名
      width: 180,
      selectOption: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ]
    },
    {
      label: '使用权限', // 输入框名字
      slotType: 'select', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'power_status', // 输入框字段名
      selectOption: [
        {
          value: '已禁用',
          label: '已禁用'
        },
        {
          value: '可使用',
          label: '可使用'
        }
      ]
    },
    {
      label: '电话号码', // 输入框名字
      slotType: 'input', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'phone', // 输入框字段名
      placeholder: '请输入11位数字的电话号码' // 输入框placeholder提示语加上，可用于告知用户规则
    },
    {
      label: '邮箱', // 输入框名字
      slotType: 'input', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'email', // 输入框字段名
      placeholder: '请输入邮箱号码' // 输入框placeholder提示语加上，可用于告知用户规则
    },
    {
      label: '申请地', // 输入框名字
      slotType: 'input', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'area' // 输入框字段名
    },
    {
      label: '申请时间', // 输入框名字
      slotType: 'input', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'date', // 输入框字段名
      placeholder: '请按照正确格式填写,如2020-01-01' // 输入框placeholder提示语加上，可用于告知用户规则
    },
    {
      label: '申请原因', // 输入框名字
      slotType: 'input', // 组件类型
      itemType: 'text', // 输入框类型
      propName: 'reason', // 输入框字段名
      inputType: 'textarea',
      maxlength: 100,
      showWordLimit: true
    }
  ]
})

/**
 * @description 调用子组件updateMyForm方法，将form绑定值更新
 */
const updateMyForm = data => {
  myRuleForm.value.updateMyForm(data)
}

const submitForm = form => {
  console.log(form, 'form')
  updateItem(form).then(res => {
    console.log(res, 'resresresres')
    const { data, msg } = res.data
    if (!data && msg !== '新增成功') {
      return
    }
    emits('submitForm')
  })
}

/**
 * @description 返回上一页
 */
const goBack = () => {
  emits('goBack')
}

defineExpose({
  updateMyForm
})
</script>
<style lang="scss" scoped>
.add-form-page {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #1e252c;
  line-height: 24px;
  font-weight: 500;

  .header-tool {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .title {
    margin: 8px 0;
    font-size: 24px;
    font-weight: 700;
  }

  .goBack {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
